<!-- 单页模板 -->
<template>
	<div class="sys-menu-container">
		<el-dialog v-model="isShowDialog" :append-to-body="true" destroy-on-close :title="props.title" width="90%" draggable="">
			<el-container>
				<el-main style="padding: 10px">
					<el-card class="box-card">
					<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
							<el-row :gutter="35">
								<el-form-item v-show="false">
									<el-input v-model="ruleForm.id" />
								</el-form-item>
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="栏目名称" prop="title">
										<el-input v-model="ruleForm.title" placeholder="请输入栏目名称" clearable />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="副标题" prop="subTitle">
										<el-input v-model="ruleForm.subTitle" placeholder="请输入副标题" clearable />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="是否显示" prop="isTopShow">
										<el-select v-model="ruleForm.isTopShow" placeholder="是否显示" clearable>
											<el-option label="是" :value="true" />
											<el-option label="否" :value="false" />
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="SEO关键词" prop="keyWord">
										<el-input v-model="ruleForm.keyWord" placeholder="SEO关键字，填写利于抓取，英文逗号分隔" clearable />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="SEO描述" prop="summary">
										<el-input v-model="ruleForm.summary" placeholder="SEO关键字，填写利于抓取，英文逗号分隔" clearable />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="内容" prop="content">
										<Editor v-model:get-html="ruleForm.content" />
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-card>
				</el-main>
				<el-aside style="padding: 10px">
					<el-card class="box-card">
					<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
							<div style="font-size: 16px; color: black; font-weight: bold">基础属性:</div>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="父栏目" prop="parentId">
									<el-select v-model="ruleForm.parentId" placeholder="请选择父栏目" clearable>
										<el-option label="父级" :value="0" />
										<el-option v-for="item in state.ParentIdcommonData" :key="item.id" :label="item.title" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="栏目模板" prop="tempId">
									<el-select v-model="ruleForm.tempId" placeholder="请选择栏目模板" clearable>
										<el-option v-for="item in state.tempData" :key="item.id" :label="item.title" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="英文名称" prop="enTitle">
									<el-input v-model="ruleForm.enTitle" placeholder="请输入英文名称" clearable />
								</el-form-item>
							</el-col>
							  <el-divider border-style="double" />
							<!-- 选择图片 -->
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<div class="resource-style-box" v-if="ruleForm.imgUrl==undefined" @click="openresourceDialog('img')">
									<img class="xz-img" src="../../../../assets/addImg.png" />
									<p>选择图片</p>
								</div>
								<div class="resource-mouse-img" @mouseenter="handleMouseEnter('img')" @mouseleave="handleMouseLeave('img')" v-else>
									<img class="mouse-img" :src="ruleForm.imgUrl" />
									<div class="show-mask-layer" v-if="state.showMaskLayerImg">
										<p class="mask-layer-p1" @click="openresourceDialog('img')">更换图片</p>
										<p class="mask-layer-p2" @click="delImg">删除图片</p>
									</div>
								</div>
							</el-col>
							  <el-divider border-style="double" />
							<!-- 选择视频 -->
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<div class="resource-style-box" v-if="ruleForm.videoUrl==undefined" @click="openresourceDialog('video')">
									<img class="xz-img" src="../../../../assets/addVideo.png" />
									<p>选择视频</p>
								</div>
								<div class="resource-mouse-video" @mouseenter="handleMouseEnter('video')" @mouseleave="handleMouseLeave('video')" v-else>
									<video class="mouse-video" data-v-4dbcfb6a="" webkit-playsinline="true" playsinline="true" :src="ruleForm.videoUrl" controls="true"></video>
									<div class="show-mask-layer" v-if="state.showMaskLayerVideo">
										<p class="mask-layer-p1" @click="openresourceDialog('video')">更换视频</p>
										<p class="mask-layer-p2" @click="delVideo">删除视频</p>
									</div>
								</div>
							</el-col>
							<!-- 选择附件 -->
							<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<div class="resource-style-box" v-if="state.resourceListAnnex.length === 0" @click="openresourceDialog('annex')">
									<img class="xz-img" src="../../../../assets/fujian.png" />
									<p>选择附件</p>
								</div>
								<div class="resource-mouse-img" @mouseenter="handleMouseEnter('annex')" @mouseleave="handleMouseLeave('annex')" v-else>
									<img class="mouse-img moren-img" src="../../../../assets/fujian.png" />
									<p class="img-text">{{ state.resourceListAnnex[0].name }}</p>
									<div class="show-mask-layer" v-if="state.showMaskLayerAnnex">
										<p class="mask-layer-p1" @click="openresourceDialog('annex')">更换附件</p>
										<p class="mask-layer-p2" @click="delAnnex">删除附件</p>
									</div>
								</div>
							</el-col>-->
							<!-- 选择压缩包 -->
						<!-- 	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> 
								<div class="resource-style-box" v-if="state.resourceListCompress.length === 0" @click="openresourceDialog('compress')">
									<img class="xz-img" src="../../../../assets/yasuobao.png" />
									<p>选择压缩包</p>
								</div>
								<div class="resource-mouse-img" @mouseenter="handleMouseEnter('compress')" @mouseleave="handleMouseLeave('compress')" v-else>
									<img class="mouse-img moren-img" src="../../../../assets/yasuobao.png" />
									<p class="img-text">{{ state.resourceListCompress[0].name }}</p>
									<div class="show-mask-layer" v-if="state.showMaskLayerCompress">
										<p class="mask-layer-p1" @click="openresourceDialog('compress')">更换压缩包</p>
										<p class="mask-layer-p2" @click="delCompress">删除压缩包</p>
									</div>
								</div>
							</el-col> -->
							  <el-divider border-style="double" />
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="栏目属性" prop="enTitle">
									<el-checkbox v-model="ruleForm.isTopShow">是否顶部显示</el-checkbox>
									<el-checkbox v-model="ruleForm.isWapShow">是否移动端显示</el-checkbox>
								</el-form-item>
							</el-col>
								<div style="font-size: 16px; color: black; font-weight: bold">扩展属性:</div>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="转向链接" prop="linkUrl">
										<el-input v-model="ruleForm.linkUrl" placeholder="请输入转向链接地址" clearable />
								</el-form-item>
							</el-col>
						</el-form>
					</el-card>
				</el-aside>
				
			</el-container>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<Resource :limitNum="1" :fileType="state.fileType" ref="resourceRef" @resourceVal="resourceVal" />
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormRules, UploadProps } from 'element-plus';
import { addCms_Column, editCms_Common, getStepBodys } from '/@/api/CMS/cms_common';
import { getTemplateAll } from '/@/api/CMS/cms_template';
import Editor from '/@/components/editor/index.vue';
import Resource from '/@/components/resource/index.vue';
import { parse } from 'querystring';
import '/@/views/CMS/cms_Template/common/tempStype.css';
const resourceRef = ref<InstanceType<typeof Resource>>();
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
	columnData:[] as any ,
		isadd:false as any,
});
const state = reactive({
	ParentIdcommonData: [] as any,
	fileList: [] as any,
	videoList: [] as any,
	videofile: {} as any,
	imagefile: {} as any,
	resourceList: [] as any, //图片回显
	resourceListVideo: [] as any, //视频回显
	resourceListAnnex: [] as any, //附件回显
	resourceListCompress: [] as any, //压缩包回显
	showMaskLayerImg: false, //选择图片遮罩层状态
	showMaskLayerVideo: false, //选择视频遮罩层状态
	showMaskLayerAnnex: false, //选择附件遮罩层状态
	showMaskLayerCompress: false, //选择压缩包遮罩层状态
	fileType: '',
	tempData:[] as any,
});
//选择图片鼠标移入显示遮罩层
const handleMouseEnter = (type: any) => {
	if (type == 'img') {
		state.showMaskLayerImg = true;
	}
	if (type == 'video') {
		state.showMaskLayerVideo = true;
	}
	if (type == 'annex') {
		state.showMaskLayerAnnex = true;
	}
	if (type == 'compress') {
		state.showMaskLayerCompress = true;
	}
};
//旋转图片鼠标移出隐藏遮罩层
const handleMouseLeave = (type: any) => {
	if (type == 'img') {
		state.showMaskLayerImg = false;
	}
	if (type == 'video') {
		state.showMaskLayerVideo = false;
	}
	if (type == 'annex') {
		state.showMaskLayerAnnex = false;
	}
	if (type == 'compress') {
		state.showMaskLayerCompress = false;
	}
};
//删除选中图片
const delImg = () => {
	ruleForm.value.imgUrl=undefined;
};
//删除选中视频
const delVideo = () => {
	ruleForm.value.videoUrl=undefined;
};
//删除选中附件
const delAnnex = () => {
	state.resourceListAnnex = [];
};
//删除选中压缩包
const delCompress = () => {
	state.resourceListCompress = [];
};
//资源管理回调
const resourceVal = (arr: any) => {
	console.log(state.fileType);
	if (state.fileType == 'img') {
		ruleForm.value.imgUrl = arr[0].shortUrl;
	}
	if (state.fileType == 'video') {
		ruleForm.value.videoUrl = arr[0].shortUrl;
	}
	if (state.fileType == 'annex') {
		state.resourceListAnnex = arr;
	}
	if (state.fileType == 'compress') {
		state.resourceListCompress = arr;
	}
	// console.log('arrrrr', arr);
};
//父级传递来的函数，用于回调
const emit = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
	title: [{ required: true, message: '请输入栏目名称！', trigger: 'blur' }],
	subTitle: [{ required: true, message: '请输入副标题！', trigger: 'blur' }],
});

// 打开弹窗
const openDialog = (row: any) => {
	ruleForm.value.imgUrl=undefined;
	ruleForm.value.videoUrl=undefined;
	state.resourceListAnnex = [];
	state.resourceListCompress = [];
	ruleFormRef.value?.resetFields();
	ruleForm.value = JSON.parse(JSON.stringify(row));
	isShowDialog.value = true;
	initTemplateData();
	ruleForm.value.parentId=parseInt(ruleForm.value.parentId) ;
	if(props.isadd){ruleForm.value.parentId=0}
	
};
// 关闭弹窗
const closeDialog = () => {
	
	isShowDialog.value = false;
};
// 打开资源管理弹窗
const openresourceDialog = (type: any) => {
	state.fileType = type;
	resourceRef.value?.openDialog();
};
const vidoeprogress: UploadProps['onPreview'] = (uploadFile) => {
	console.log(uploadFile);
};
// 取消
const cancel = () => {
	isShowDialog.value = false;
};
const initTemplateData = async () => {
	var res = await getTemplateAll();
	state.tempData = res.data.result ?? [];
	
};
// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = ruleForm.value;
			if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
				await editCms_Common(values);
			} else {
				ElMessage({
					message: `新增功能请移至 栏目管理 中~！`,
					type: 'error',
				});
				return;
			}
			emit('handleQuery');
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};

// 页面加载时
onMounted(async () => {
	handleQuery();
});
const handleQuery = async () => {
	var res = await getStepBodys();
	state.ParentIdcommonData = res.data.result?? [];
	ruleForm.value.parentId=0;
};
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
